<template>
    <van-swipe :autoplay="4000">
        <van-swipe-item v-for="item in carouselItems" :key="item.id">
            <img :src="`${APIDomainName}${item.img}`" width="100%" />
        </van-swipe-item>
    </van-swipe>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
export default {
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
    },

    props: ["carouselItems"],
    computed: {
        APIDomainName() {
            return process.env.VUE_APP_APIDOMAINNAME;
        },
    },
};
</script>

<style lang="scss" scoped>
.van-swipe {
    height: 200px;
    color: #fff;
    .van-swipe-items-wrap {
        .van-swipe-item {
            text-align: center;
        }
        img {
            width: 100%;
            height: 200px;
        }
    }
}
</style>
